import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';


export default class App extends Component<{}> {
    
    constructor(){
        super();
        this.state = {
            titles:[1111,1112,1113,1114]
        }
    }
    
  render() {

        // 用来存放每个组件的数组
      let alltitle = [];
        // 循环titles，将每一项数据都组合成一个text组件，存到一个单独的数组中
      this.state.titles.map((x) => {
          alltitle.push(<Text style={styles.title}>标题:{x}</Text>)
      })

    return (
      <View style={styles.container}>
        <Text style={styles.btn}>
          点我啊！我是按钮！
        </Text>
          {alltitle}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
    btn:{
    backgroundColor:'purple',
        color:'white',
        fontSize:28,
        width:'70%',
        height:100,
        textAlign:'center',
        lineHeight:100,
        marginTop:30
    },
    title:{
      fontSize:25
}

});
